import { h, Component } from 'preact';
import { connect } from 'preact-redux';
import { bindActionCreators } from 'redux';
import * as cookerAction from '~/action/user';
import classNames from 'classnames';
import s from './BaseInfo.scss';
import moment from 'moment';
import Loading from '~/components/Loading';
import HeaderBar from '~/components/HeaderBar';
import Select from '~/components/Select';
import Modal from '~/components/Modal';
import validate, { VRequire, VPhone, VEmail } from '~/utils/validate';
import history from '~/core/history';
import { modifyCooks } from '~/api';
import face from './face.jpg';

class BaseInfo extends Component {

	constructor(props) {
		super(props);
		this.state = {
			name: this.props.user.name || null,
			phone: this.props.user.phone || null,
			sex: this.props.user.sex || null,
			company: this.props.user.company || '休息中',
			jobTitle: this.props.user.jobTitle || null,
			birthday: this.props.user.birthday || null,
			email: this.props.user.email || null,
			id: this.props.user.id || null,
			showModal: false,
			message: null
		};
	}

	componentDidMount() {
	}



	componentWillReceiveProps(nextProps) {
		if (nextProps.user !== this.props.user) {

			console.log('获取用户信息', nextProps.user);
			this.setState({
				name: nextProps.user.name,
				phone: nextProps.user.phone,
				sex: nextProps.user.sex,
				company: nextProps.user.company,
				jobTitle: nextProps.user.jobTitle,
				birthday: nextProps.user.birthday,
				id: nextProps.user.id,
				email: nextProps.user.email
			});
		}
	}

	showModal = (message) => {
		this.setState({
			message,
			showModal: true
		});
	}

	handleValidate = () => {
		const {
			name,
			phone,
			sex,
			company,
			jobTitle,
			birthday,
			email
		} = this.state;
		return validate(
			VRequire(name) ? '请填写姓名' : null,
			VPhone(phone),
			// VRequire(company) ? '请填写公司名称' : null,
			VRequire(jobTitle) ? '请选择职位' : null,
			VRequire(birthday) ? '请填写出生日期' : null,
			VEmail(email)
		);
	}

	handleSubbmit = () => {
		const {
			name,
			phone,
			sex,
			company,
			jobTitle,
			birthday,
			email
		} = this.state;
		const data = {
			id: this.props.user.id,
			name,
			openid: this.props.user.openid,
			phone,
			email,
			headimgurl: this.props.user.headimgurl,
			sex,
			birthday: moment(birthday).format('YYYY-MM-DD'),
			company,
			jobTitle
		};
		if (this.handleValidate()) {
			this.showModal(this.handleValidate());
			return;
		}
		Loading.show();
		modifyCooks(data).then(res => {
			Loading.hide();
			this.props.setUser({
				...this.props.user,
				name,
				phone,
				sex,
				company,
				jobTitle,
				birthday,
				email
			});
			history.push('/usercenter');
		}).catch((res) => {
			Loading.hide();
			this.showModal(res.message || '网络异常！请重试');
		});
	}

	render({ path }) {
		const {
			name,
			phone,
			sex,
			company,
			jobTitle,
			birthday,
			email
		} = this.state;
		return (
			<div style={{height: '100%'}}>
				<HeaderBar
					setTitle="修改基本资料"
					goBack
				/>
				<div className={classNames(s.root)}>
					<div className="pd1 pdb5">
						<div className={classNames(s.card, 'radius-small', 'pdb2')}>
							<div className={s.face}>
								<img src={this.props.user.headimgurl} alt=""/>
							</div>
							<ul className={classNames(s.form, 'nls', 'clearfix', 'formBox')}>
								<li className='w2-5 al-r'><span className="pdr-5">姓名</span></li>
								<li className='w6-5'>
									<input
									value={name}
									type="text"
									onChange={(e) => {this.setState({name: e.target.value});}}
									/>
								</li>
								<li className='w2-5 al-r'><span className="pdr-5">手机</span></li>
								<li className='w6-5'>
									<input
									maxLength="11"
									value={phone}
									onChange={(e) => {this.setState({phone: e.target.value});}}
									type="text"
									/>
								</li>
								<li className='w2-5 al-r'><span className="pdr-5">性别</span></li>
								<li className='w6-5'>
									<Select name="" id="" value={sex}
										className={classNames(s.select, 'icon-downarrow')}
										onChange={(e) => {this.setState({sex: e.target.value});}}
									>
										<option value="1">男</option>
										<option value="0">女</option>
									</Select>
								</li>
								<li className='w2-5 al-r'><span className="pdr-5">公司</span></li>
								<li className='w6-5'>
									<input
										value={company}
										type="text"
										onChange={(e) => {this.setState({company: e.target.value});}}
									/>
								</li>
								<li className='w2-5 al-r'><span className="pdr-5">生日</span></li>
								<li className='w6-5'>
									<input
										value={birthday}
										className='ww'
										type="date"
										onChange={(e) => {console.log(e); this.setState({birthday: e.target.value});}}
									/>
								</li>
								<li className='w2-5 al-r'><span className="pdr-5">Email</span></li>
								<li className='w6-5'>
									<input
										value={email}
										className='ww'
										type="email"
										onChange={(e) => {this.setState({email: e.target.value});}}
									/>
								</li>
								<li className='w2-5 al-r'><span className="pdr-5">职位</span></li>
								<li className='w6-5'>
									<Select name="" id="" value={jobTitle} className={classNames(s.select, 'icon-downarrow')}
										onChange={(e) => {this.setState({jobTitle: e.target.value});}}
									>
										<option value={null}>请选择</option>
										<option value="0">水台</option>
										<option value="1">配菜</option>
										<option value="2">打荷</option>
										<option value="3">砧板</option>
										<option value="4">上杂</option>
										<option value="5">油鸡</option>
										<option value="6">尾锅</option>
										<option value="7">五锅</option>
										<option value="8">四锅</option>
										<option value="9">三锅</option>
										<option value="10">二锅</option>
										<option value="11">头锅</option>
										<option value="12">总厨</option>
										<option value="13">顾问</option>
										<option value="14">其他</option>
									</Select>
								</li>
							</ul>
							<div className="btn mgt2 w9 center" onClick={this.handleSubbmit}>修改</div>
						</div>
					</div>
				</div>
				<Modal
					contentLabel="Modal"
					isOpen={this.state.showModal}
					onRequestClose={() => {this.setState({showModal: false});}}
					shouldCloseOnOverlayClick={true}
				>
					<h3 className="al-c pdt3">{this.state.message}</h3>
				</Modal>
			</div>
		);
	}
}


function mapStateToProps(state) {
	return {
		user: state.user
	};
}

function mapDispatchToProps(dispatch) {
	return bindActionCreators({
		setUser: cookerAction.setUser
	}, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(BaseInfo);
